<template>
	<view>
		<view class="" v-show="seachIndex==0">
			<view class="m-2 pl-3 bg-white rounded-20">
				<view class="d-flex border-bottom j-sb py-3 clazz" @click="goodsClass">
					<view class="">商品分类</view>
					<view class="d-flex">
						<view class="text-muted">{{clazzList==""?"请选择分类":clazzList.cat_name}}</view>
						<u-icon name="arrow-right" color="#999" size="28"  class="mr-3 ml-1"></u-icon>
					</view>
				</view>
				<view class="d-flex j-sb py-3 clazz" @click="goods_brand">
					<view class="">商品品牌</view>
					<view class="d-flex ">
						<view class="text-muted">{{brand_item?brand_item.brand_name:'请选择品牌'}}</view>
						<u-icon name="arrow-right" color="#999" size="28" class="mr-3 ml-1"></u-icon>
					</view>
				</view>
			</view>
			<view class="m-2 pl-3  bg-white rounded-20">
				<view class="d-flex border-bottom j-sb py-3 clazz" @click="recommend">
					<view class="">活动推荐</view>
					<view class="d-flex">
						<view class="">{{mesg===null?"全部":mesg}}</view>
						<u-icon name="arrow-right" color="#999" size="28"  class="mr-3 ml-1"></u-icon>
					</view>
				</view>
				<view class="d-flex j-sb py-3 clazz" @click="down">
					<view class="">上下架</view>
					<view class="d-flex ">
						<view class="">{{downMesg===null?"全部":downMesg}}</view>
						<u-icon name="arrow-right" color="#999" size="28" class="mr-3 ml-1"></u-icon>
					</view>
				</view>
			</view>
			<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
				<button type="warn" @click="advSeach">搜索</button>
			</view>
		</view>
		
		<view class="" v-show="seachIndex==1">
			<view class="bg-white d-flex j-center a-center py-2">
				<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
					<u-icon name="search" color="#888888" size="33" class="mx-2"></u-icon>
					<input type="text" confirm-type="search" @confirm="seach" placeholder="搜索商品名称" placeholder-class="font" v-model="keywords" @input="seachInput" />
				</view>
			</view>
			<!-- 在售商品 -->
			<view class="wrap deep" >
				<view v-if="!saleList.length" class="d-flex flex-column j-center a-center h-100 pb-3">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无商品</view>
				</view>
				<view v-else  class="goods_card bg-white m-2 p-3 rounded-20" v-for="(item,index) in saleList" :key="index">
					<view class="goods_card_head d-flex"  @click="goodsEdit(item)">
						<view class="goods_card_head_left">
							<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
						</view>
						<view class="goods_card_head_right pl-2">
							<view class="d-flex">
								<view class="ellipsis pro_name">
									<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
									<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
									<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
									<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
									{{item.name}}
								</view>
							</view>
							<view class="text-light-muted font mt-2">
								<text class="mr-3">库存：{{item.stock}}</text>
								<text>销量：{{item.sales_volume}}</text>
							</view>
							<view class="mt-5">
								<text class="text-danger mr-2">{{item.shop_price}}</text><text class="font text-light-muted tex line-through">{{item.market_price}}</text>
							</view>
						</view>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				mesg:null,
				downMesg:null,
				clazzList:'',
				seachIndex:0,
				brand_item:"", // 品牌
				saleList:"", // 在售列表
				on_sale_status:"", // 上下架状态
				suggest:"", // 活动推荐
				canSwip:false,
				
				pagination:"", // 分页条数 信息
				more:1, // 第几页
				count:10, // 条数
			}
		},
		methods: {
			getData(){
				this.$H.post("admin/merchant/goods/list",{
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
						this.saleList=res.data
						console.log(res)
				})
			},
			// 高级搜索
			advSeach(){
				this.seachIndex=1;
				if(this.suggest==""&&this.on_sale_status==""&&this.brand_item.brand_id==""){
					this.$H.post("admin/merchant/goods/list",{
						pagination:{
							count:this.count,
							page:this.more
						}
					}).then(res=>{
						this.pagination=res.paginated
						this.saleList=res.data
					})
				}else{
					this.$H.post("admin/merchant/goods/search",{
						category_id:this.clazzList.cat_id,
						on_sale_status:this.on_sale_status,
						suggest:this.suggest,
						brand_id:this.brand_item.brand_id
					}).then(res=>{
						console.log(res)
						this.saleList=res.data
						var claaa = getApp().globalData.clazz; //获取全局变量
						getApp().globalData.clazz= null; //修改全局变量
						
						var globalData = getApp().globalData.closeLists; //获取全局变量
						getApp().globalData.closeLists= null; //修改全局变量
						
						var globalData = getApp().globalData.downMesg; //获取全局变量
						getApp().globalData.downMesg= null; //修改全局变量
						
						var globalData = getApp().globalData.brand_item; //获取全局变量
						getApp().globalData.brand_item= null; //修改全局变量
					})	
				}
			},
			// 品牌
			goods_brand(){
				uni.navigateTo({
					url:"/pages/goods-trademark/goods-trademark"
				})
			},
			// 商品详情
			goodsEdit(item){
				uni.navigateTo({
					url:"/pages/goods-edit/goods-edit?goods_id="+item.goods_id
				})
			},
			// 商品分类
			goodsClass(){
				uni.navigateTo({
					url:"/pages/goods-add-class/goods-add-class"
				})
			},
			// 活动推荐
			recommend(){
				uni.navigateTo({
					url:"/pages/goods-seach-recommend/goods-seach-recommend"
				})
			},
			// 上下架
			down(){
				uni.navigateTo({
					url:"/pages/goods-seach-down/goods-seach-down"
				})
			}
		},
		onUnload() {
			var claaa = getApp().globalData.clazz; //获取全局变量
			getApp().globalData.clazz= null; //修改全局变量
			
			var globalData = getApp().globalData.closeLists; //获取全局变量
			getApp().globalData.closeLists= null; //修改全局变量
			
			var globalData = getApp().globalData.downMesg; //获取全局变量
			getApp().globalData.downMesg= null; //修改全局变量
			
			var globalData = getApp().globalData.brand_item; //获取全局变量
			getApp().globalData.brand_item= null; //修改全局变量
		},
		onShow(){
			var globalData = getApp().globalData.brand_item;
			this.brand_item=globalData
			// 商品分类
			if(getApp().globalData.clazz){
				var clazz = getApp().globalData.clazz;
				this.clazzList=clazz
			}
			console.log(this.clazzList,"分类")
			// 活动推荐
			var globalData = getApp().globalData.closeLists;
			this.mesg=globalData
			if(globalData){
				if(this.mesg=="平台推荐精品"){
					this.suggest='is_best'
				}else if(this.mesg=="平台推荐新品"){
					this.suggest='is_new'
				}else if(this.mesg=="平台推荐热销"){
					this.suggest='is_hot'
				}else if(this.mesg=="商家推荐精品"){
					this.suggest='store_best'
				}else if(this.mesg=="商家推荐新品"){
					this.suggest='store_new'
				}else if(this.mesg=="商家推荐热销"){
					this.suggest='store_hot'
				}else if(this.mesg=="平台全部推荐"){
					this.suggest='platform_all_suggest'
				}else if(this.mesg=="商家全部推荐"){
					this.suggest='store_all_suggest'
				}else if(this.mesg=="特价"){
					this.suggest='promopte'
				}
			}
			
			// 上下架
			var downMesgData = getApp().globalData.downMesg;
			this.downMesg=downMesgData
			if(downMesgData){
				if(this.downMesg=='上架'){
					this.on_sale_status='on'
				}else{
					this.on_sale_status='off'
				}
			}
		},
		// 上拉加载函数
		onReachBottom(){
		    let that = this
		    // 每次上拉加载的数据比上一次多十个
		    that.count += SIZE
		    setTimeout(()=>{
		        that.getData()
		    },1000)
		},
	}
</script>

<style>
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	.restore{
		border-radius: 40upx;
		border: 1px solid #555;
	}
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left image{
		width: 180upx;
		height: 180upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		padding: 8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.popupImg{
		width: 170upx;
		height: 170upx;
	}
	.deep /deep/ button{
		width: 70%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
</style>
